<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mock_exam</title>
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
    <div class="head">
            <span class="title">在线驾考模拟系统</span>
            <ul>
                <!-- <li><a href="loading.html">登录</a></li>
                <li><a href="register.html">注册</a></li> -->
            </ul>      
        </div>
    
        <div class="nav">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="order_exercise.html">顺序练题</a></li>
                <li><a href="error_book.html">错题本</a></li>
                <li><a href="mock_exam.html">模拟测试</a></li>
                <li><a href="message.html">留言板</a></li>
            </ul>
        </div>

        <div id="content" class="content">
			<span id="time">00:00</span>
			<ul>
				<li>
					<p></p>
					<div>
						
					</div>
				</li>
			</ul>
			<button type="button" id="sub">交卷</button>
        </div>
		<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/util.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var rightArr = []
			var selectedArr = []
			var rightNum = 0
			var errorNum = 0
			var total = 0
			init()
			function init() {
				$.ajax({
					// url: './order.json',
			        url:'order.json',
					success(res) {
						loadQuestion(res)
						$('#sub').on('click', testOver)
					}
				})
			}
			
				
			// 载入问题
			function loadQuestion(res) {
				console.log(res.data)
				var time = new TimeObj(10, '#time', timeOver)
				time.beginCount()
				rightArr = []
				selectedArr = new Array(res.data.length)
				total = res.data.length
				var str = ''
				for(var ele of res.data) {
					console.log(ele)
					rightArr.push(ele.right_id)
					str += questionItem(ele)
				}
				$('#content>ul').html(str)
				console.log(selectedArr, rightArr)
				$('input[type="radio"]').on('click', function() {
					var val = $(this).val()
					var li = $(this).parents('li')
					var index = $(li).index()
					selectedArr[index] = val
					console.log(selectedArr)
				})
			}
			// 问题模板
			function questionItem(obj) {
				return `<li>
					<div class="" name="${obj.id}">
						${obj.id}.${obj.question}
					</div>
					<div class="input" data-right="${obj.right_id}">
						${radioTemplate(obj)}
					<div>
				</li>`
			}
			function radioTemplate(obj) {
				var str = ''
				for(var ele of obj.option) {
					str += inputTemplate(obj.id, ele)
				}
				return str
			}
			function inputTemplate(id, item) {
				return `<input name="${id}" type="radio" value="${item.answer_id}"/><span>${item.answer_word}</span>`
			}
			function timeOver() {
				alert('时间结束')
				testOver()
			}
			function testOver() {
				for(var i=0; i<selectedArr.length; i++) {
					var ele = selectedArr[i]
					if(ele) {
						if(ele === rightArr[i]) {
							rightNum++
						} else {
							errorNum++
						}
					} else {
						errorNum++
					}
				}
				console.log('正确题目数量',rightNum,'错题目数量',errorNum)
				alert(`一个${total}道题,答对${rightNum}, 答错${errorNum}`)
			}
		</script>
</body>
</html>